  
  <template>
  <div class="login">
    <div class="loginall">
      
      <div class="login1">
        <img src="../assets/image/pic/logo/orange.png" alt="">
      </div>

      <ul class="login2">
        <li class="login2a">
          <input type="text" placeholder="手机号" class="login2b" v-model="reglist.phone">
        </li>
        <li class="login2a">
          <input type="text" placeholder="昵称" class="login2b" v-model="reglist.nickname">
        </li>       
         <li class="login2a">
          <input type="text" placeholder="密码" class="login2b" v-model="reglist.password">
        </li>
      </ul>

      <div class="login3" @click="register">
        注册
      </div>
    </div>
  </div>
</template>
<script>
// 7772
import {Register} from '../util/request/api'
export default {

  data() {
    return {
      reglist:{
        phone:'',
        nickname:'',
        password:''
      }
    }
  },
  methods: {
    //  7774直接调用
    // Register()

    //   注册事件,原生写法
    register(){
        // 填写完整
       if (this.reglist.phone == '' || this.reglist.nickname == '' || this.reglist.password  == '') {
         alert('填写不完整')  
       } else{
           console.log(this.reglist,'liebiao');
       }
       // 填写完整后添加用户，7773删除下面调取
    //    this.$axios({
    //        url:'/api/register',
    //        methods: 'post',
    //        data:this.reglist
    //    })

    //7774直接调用
        Register(this.reglist)
       .then(res=>{
           console.log(res,'相应');
          //  data
           if (res.code==200) {
               this.$router.push('/login')
           }else{
               alert(res.msg)
           }
       })
        .catch(err=>{
          console.log(err,'cuowu')
        })
    }
  },
};
</script>
<style scoped>
.login{
  width: 7.1rem;
  height: 13rem;
  /* background: royalblue; */
  margin: 0 auto;
  margin-top: 2rem;
  padding-top: 0.2rem;
}
.login .loginall{
  width: 6.1rem;
  height: 4.35rem;
  margin: 0 auto;
  padding-top: 4rem;
  /* background: saddlebrown; */
  display: flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.login .loginall .login1{
  width: 3.64rem;
  height: 0.98rem;
}
.login .loginall .login1 img{
  width: 3.64rem;
  height: 0.98rem;
}
.login3{
  width: 6.1rem;
  height: 1rem;
  /* background: chartreuse; */
  color: white;
  line-height: 1rem;
  background: #CCCCCC;
  text-align: center;
}
.login2b{
  width: 6.1rem;
  height: 0.8rem;
}
</style>
    
